import React, { memo, useState } from 'react'
import { useDispatch } from 'react-redux'
import {Page} from './BuyPopup.style'

function BuyPopup(props) {
    const {popupDisplay}=props
    const {goodsAttribute,setPopupDisplay,changeFormData}=props
    const [goodsCount,setGoodsCount]=useState(1)

    const changeGoodsCount=(value)=>{
        setGoodsCount(value)
        changeFormData({target:{
            name:'count',
            value
        }})
    }

    return (
        <Page Display={popupDisplay}>
            <div className="container">
                <div className="cancel iconfont icon-guanbi" onClick={()=>setPopupDisplay(false)}></div>
                <div className="header">
                    <img src="" alt="" />
                    <div>
                        <div className="price">价格：100</div>
                        <div>请选择规格</div>
                    </div>
                </div>
                <form className="body">
                    {
                        goodsAttribute.map((attribute,index)=>{
                            return (
                                <div key={index+"attribure"} className='attribute'>
                                    {attribute.name}
                                    <div className="attribute_list">
                                        {attribute && attribute.list.map((attributeValue,index)=>{
                                            return (
                                                <div  key={index+"attributeValue"}>
                                                    <input type="radio" id={attribute.name+index} name={attribute.name} value={attributeValue} onChange={(e)=>changeFormData(e)} />
                                                    <label htmlFor={attribute.name+index}>{attributeValue}</label>
                                                </div>
                                            )
                                        })}
                                    </div>
                                    
                                </div>
                            )
                        })
                    }
                    <div className="count">
                        数量
                        <div>
                            <button type='button' disabled={goodsCount>1 ? false :true} className={goodsCount>1 ? "" :'disable'} onClick={()=>changeGoodsCount(goodsCount-1)}>-</button>
                            <input type="number" value={goodsCount} onChange={(e)=>{setGoodsCount(e.target.value)}} />
                            <button type="button" onClick={()=>changeGoodsCount(goodsCount+1)}>+</button>
                        </div>
                    </div>
                </form>
            </div>
            <div className='side' onClick={()=>{setPopupDisplay(false)}}></div>
        </Page>
    )
}

export default memo(BuyPopup)
